<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>修改DOM结构</title>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
		//JQuery为不同浏览器提供了统一的API这样我们不用担心浏览器兼容性问题
		//我们直接操作JQuery对象就可以操作DOM对象
	</script>
</head>
<body>

	<div id="test-div">
		<ul>
			<li><span>JavaScript</span></li>
			<li><span>Python</span></li>
			<li><span>Swift</span></li>
			<li id="scheme"><span>Scheme</span></li>
		</ul>
	</div>
<script>
	//添加dom
	//方式1：直接添加html
	let ul = $("#test-div>ul");
	ul.append("<li><span>Java</span></li>");

	//方式2: 添加dom对象
	let css = document.createElement("li");
	css.innerHTML = "<span>CSS</span>";
	ul.append(css);

	//方式3: 添加jquery对象
	// 先将原来的JQuery对象删除 然后再添加
	let scheme = $("#scheme");
	ul.append(scheme);

	//方式4: 添加一个函数
	ul.append(function (index,html) {
		return "<li><span>Language-index" + index + "</span></li>";
	});

	//append 方法把dom添加到最后  prepend 方法添加到最前面
	//还可以添加到指定的位置 如 JavaScript之后
	//同级节点就可以Atfer,before
	let js = $("#test-div>ul>li:first-child");
	js.after("<li><span>C++</span></li>");

	//删除节点 : 获取Jquery 对象之后 调用 remove方法即可
	//删除所有的li
	let swift = $("#test-div>li>ul");
	swift.remove();
</script>
</body>
</html>